웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
NuxtJS를 사용하는 경우 해당 컴포넌트 또는 전역으로 style을 설정할 수 있습니다. 이 경우 만약 특정 페이지에서만 전역으로 스타일을 설정할 경우의 방법을 알아보려고 합니다.
# NuxtJS에서 특정 페이지만 전역 스타일 설정하기
제일 먼저 생각할 고민은 아래와 같습니다."특정 페이지에서만 전역 스타일 설정이 왜 필요할까?"
Nuxt에 사용된 모든 스타일은 컴파일 후 하나의 파일로 번들링 과정을 거치게 됩니다. 즉 글로벌로 설정된 스타일이 있는 경우 해당 페이지뿐만 아니라 결국 모든 페이지에 영향을 주게 된다는 점인데 이런 이유로 특정 페이지의 body나 header 등의 페이지에만 적용하기가 어렵습니다. 그래도 방법은 뭐가 있을까요?
! 해결 방법 알아보기
현실적으로 이를 우회하는 방법은 가장 많이 알려진 자바스크립트를 사용하는 방법이 있습니다. 자바스크립트의 방법은 간단합니다 ~ 페이지 컴포넌트가 Mounted 된 후 자바스크립트로 body 등에 원하는 스타일을 추가하면 됩니다.예를들어 만약 /test 패이지에서만 페이지의 배경색을 gray색으로 변경하고자 합니다. 이 경우 아래와 같은 코드를 해당 페이지 컴포넌트 내에 추가할 수 있겠습니다.
mounted: function() {
document.querySelector('body').style.backgroundColor = 'gray'
}
document.querySelector('body').style.backgroundColor = 'gray'
}
위 코드를 실행하면 간단하게 해당 페이지에서만 body에 스타일을 변경할 수 있습니다. 어려운 방법은 아니죠 ~~ 다만 더 나은 방법이 없을까 고민하게됩니다. 왜냐하면 가급적 스타일은 script 내부가 아닌 style 안에 분리하여 선언했트면 하는 아쉬움입니다. 방법이 없을까요?
@ style 태그에 v-if를 사용하는 방법
이번 방법은 더 나은 방법으로 style 태그를 그대로 사용하는 방법입니다. 동일하게 해당 페이지의 body에만 gray 색으로 배경색을 변경하려고 합니다. 아래의 코드를 봐주세요.
<style v-if="true">
body {
background-color: gray;
}
</style>
<style lang="scss" scoped>
.my-componet {
color: red;
}
</style>
body {
background-color: gray;
}
</style>
<style lang="scss" scoped>
.my-componet {
color: red;
}
</style>
위의 코드를 보면 컴포넌트 내부에 스타일 태그를 각각 두 개 선언하였습니다. 여기서 위에 선언된 style에는 v-if가 존재하는데 이 때문에 nuxt에서 특정 페이지에서만 body에 스타일을 적용할 수 있게 되었습니다. v-if가 적용된 스타일만 보겠습니다.
<style v-if="true">
body {
background-color: gray;
}
</style>
body {
background-color: gray;
}
</style>
동작 방싯을 이해해보면 특정 페이지에만 해당 컴포넌트를 불러오며 이 때 style에 적용된 v-if 때문에 다른 페이지에서는 style이 사라지므로 적용되지 않도록 한 방법입니다.
이 방식의 장점은 무엇일까요? 위 방식을 사용하면 script 내부에 스타일을 선언하지 않으므로 동작에 필요한 로직과 스타일을 완전히 구분하여 코드 작성이 가능합니다.
여기까지 NuxtJS에서 특정 페이지에만 body 등에 스타일을 적용하는 방법을 간략하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
